<!DOCTYPE html>
<html>
<head lang="zh">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/base.css">
	<title>这是一个CSS3动画的示例</title>
	<style>
		#banana
		{
			font-size: large;
			border: medium solid #000000;

		}
		#banana:hover
		{
			animation-delay: 100ms;	/* 鼠标移到banana 100ms后开始动画 */
			animation-duration: 500ms; /* 持续时间500ms */
			animation-iteration-count: infinite; /* 次数无限循环，或用数字 */
			animation-timing-function: linear;
			animation-name: 'GrowShrink';
			-moz-animation-delay: 100ms;
			-moz-animation-duration: 500ms;
			-moz-animation-iteration-count: infinite;
			-moz-animation-timing-function: linear;
			-moz-animation-name: 'GrowShrink';
			-webkit-animation-delay: 100ms;
			-webkit-animation-duration: 500ms;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-timing-function: linear;
			-webkit-animation-name: 'GrowShrink';
		}
		@keyframes GrowShrink
		{
			from
			{
				font-size: xx-small;
				background-color: red;
			}
			50%
			{
				background-color: #ffff00;
				padding: 1px;
			}
			75%
			{
				color: #ffffff;
				padding: 2px;
			}
			to
			{
				font-size: x-large;
				border: medium solid #ffffff;
				background-color: #008000;
				color: #ffffff;
				padding: 4px;
			}
		}
		@-webkit-keyframes GrowShrink
		{
			from
			{
				font-size: xx-small;
				background-color: red;
			}
			50%
			{
				background-color: #ffff00;
				padding: 1px;
			}
			75%
			{
				color: #ffffff;
				padding: 2px;
			}
			to
			{
				font-size: x-large;
				border: medium solid #ffffff;
				background-color: #008000;
				color: #ffffff;
				padding: 4px;
			}
		}
		@-moz-keyframes GrowShrink
		{
			from
			{
				font-size: xx-small;
				background-color: red;
			}
			50%
			{
				background-color: #ffff00;
				padding: 1px;
			}
			75%
			{
				color: #ffffff;
				padding: 2px;
			}
			to
			{
				font-size: x-large;
				border: medium solid #ffffff;
				background-color: #008000;
				color: #ffffff;
				padding: 4px;
			}
		}

	</style>
</head>
<body>
<noscript>此文档需要JavaScript支持才能正常使用</noscript>
<!-- 定义页头 -->
<header>
	<h1></h1>
</header>

<!-- 定义边栏，书写说明或者放致导航菜单 -->
<aside>
	<nav>
		<ul>

		</ul>
	</nav>
</aside>
<!-- 定义页面内容 -->
<div id="container">
	<p>CSS3动画支持还不全面，需要加入厂商前缀。这里定义了一个名为<span id="banana">banana</span>的动画。 </p>
</div>
<!-- 页面内容结束 -->
<!-- 定义页尾 -->
<footer>

</footer>
<!-- JavaScript脚本链接请在此处插入 -->
</body>
</html>